<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-11-29 10:57:44
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-01-23 14:31:11
 * @FilePath: \partal\src\views\Home.vue
 * @Description: 头部组件
-->

<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import { usePlant } from '@/stores/plant'
  import { headerPng } from '@/enum/imageEnum'
  import { PAGE_HOME, PAGE_DESIGN_INTRODUCE, PAGE_DESIGN_STANDARD, PAGE_DESIGN_STYLE, PAGE_DESIGN_VALUE, PAGE_DEVELOP_GUIDE } from '@/enum/pageEnum'
  import { PLANTTYPE_ENUM } from '@/enum/globalEnum'

  const router = useRouter()
  const plant = usePlant()
  
  /**
   * 路由跳转：首页
   */
  const goHome = () => router.push({ path: PAGE_HOME })

  /**
   * 路由跳转：设计指南-简介
   */
  const goDesignIntroduce = () => router.push({ path: PAGE_DESIGN_INTRODUCE })

  /**
   * 路由跳转：设计指南-设计价值观
   */
  const goDesignValue = () => router.push({ path: PAGE_DESIGN_VALUE })

  /**
   * 路由跳转：设计指南-设计原则
   */
  const goDesignStandard = () => router.push({ path: PAGE_DESIGN_STANDARD })

  /**
   * 路由跳转：设计指南-样式指南
   */
  const goDesignStyle = () => router.push({ path: PAGE_DESIGN_STYLE })

  /**
   * 路由跳转：开发指南-概述
   * @param plantType 平台类型
   */
  const goDevelopGuide = (plantType: PLANTTYPE_ENUM) => {
    plant.setPlantType(plantType)
    router.push({ path: PAGE_DEVELOP_GUIDE })
  }
</script>

<template>
  <div class="header">
    <div class="header-logo" @click="goHome()">
      <img class="header-logo-img" :src="headerPng.logoImg" />
      <img class="header-logo-name" :src="headerPng.logoName" />
    </div>
    <div class="header-button">
      <div class="header-button-item">
        <span class="text">设计</span>
        <img class="arrow" :src="headerPng.arrowDown" />
        <div class="detail">
          <p class="title">设计指南</p>
          <div class="content">
            <div class="item" @click="goDesignIntroduce">
              <img class="icon" :src="headerPng.design.introduce" />
              <span class="text">SSC+Design简介</span>
            </div>
            <div class="item" @click="goDesignValue">
              <img class="icon" :src="headerPng.design.value" />
              <span class="text">设计价值观</span>
            </div>
            <div class="item" @click="goDesignStandard">
              <img class="icon" :src="headerPng.design.standard" />
              <span class="text">设计原则</span>
            </div>
            <div class="item" @click="goDesignStyle">
              <img class="icon" :src="headerPng.design.style" />
              <span class="text">样式指南</span>
            </div>
          </div>
        </div>
      </div>
      <div class="header-button-item">
        <span class="text">开发</span>
        <img class="arrow" :src="headerPng.arrowDown" />
        <div class="detail">
          <p class="title">开发组件</p>
          <div class="content">
            <div class="item" @click="goDevelopGuide(PLANTTYPE_ENUM.PC)">
              <img class="icon" :src="headerPng.develop.pc" />
              <span class="text">PC端</span>
            </div>
            <div class="item" @click="goDevelopGuide(PLANTTYPE_ENUM.APP)">
              <img class="icon" :src="headerPng.develop.app" />
              <span class="text">移动端</span>
            </div>
            <div class="item" @click="goDevelopGuide(PLANTTYPE_ENUM.XCX)">
              <img class="icon" :src="headerPng.develop.xcx" />
              <span class="text">小程序端</span>
            </div>
            <div class="item" @click="goDevelopGuide(PLANTTYPE_ENUM.H5)">
              <img class="icon" :src="headerPng.develop.h5" />
              <span class="text">H5端</span>
            </div>
          </div>
        </div>
      </div>
      <div class="header-button-item">
        <span class="text">生态产品</span>
        <img class="arrow" :src="headerPng.arrowDown" />
      </div>
    </div>
  </div>
</template>

<style type="less" scoped>
  .header {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    > .header-logo {
      width: 172px;
      height: 40px;
      margin-left: 24px;
      display: flex;
      align-items: center;
      > .header-logo-img {
        width: 40px;
        height: 40px;
      }
      > .header-logo-name {
        width: 124px;
        height: 22px;
        margin-left: 8px;
      }
    }
    > .header-button {
      flex: 1;
      height: 60px;
      margin-right: 32px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      > .header-button-item {
        height: 60px;
        padding-left: 40px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        > .text {
          color: #1D2129;
          line-height: 24px;
          cursor: pointer;
        }
        > .arrow {
          margin-left: 4px;
          width: 12px;
          height: 12px;
          cursor: pointer;
        }
        > .detail {
          position: absolute;
          z-index: -1;
          top: -136px;
          left: 0;
          width: 100%;
          height: 196px;
          padding: 40px 0 48px 0;
          transform: translateY(0);
          transition: transform 300ms linear;
          background: #fff;
          > .title {
            width: 1200px;
            margin: auto;
            font-size: 20px;
            font-weight: bold;
            color: #1D2129;
            line-height: 28px;
          }
          > .content {
            width: 1200px;
            margin: 24px auto 0;
            display: flex;
            align-items: center;
            > .item {
              width: 288px;
              height: 56px;
              display: flex;
              align-items: center;
              cursor: pointer;
              > .icon {
                margin-left: 8px;
                width: 40px;
                height: 40px;
              }
              > .text {
                margin-left: 16px;
                font-size: 16px;
                color: #1D2129;
                line-height: 24px;
              }
            }
          }
        }
        &:hover {
          > .detail {
            transform: translateY(196px);
            box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
  }
</style>
